<template>
	<div class="scroll-item" :class="bgClass">
		<slot></slot>
	</div>
</template>
<script>
	export default {
		name: 'scroll-item',
		props: {
			bg: String,
			default: '',
		},
		computed: {
			bgClass(){
				return this.bg;
			}
		}
	}
</script>

<style>
	.scroll-item {
		height: 100%;
		width: 100%;
		background-color: #fff;
		text-align: center;
		font-size: 50px
	}

	.bg1 {
		background-image: url(../assets/poster.jpg);
		background-repeat: no-repeat;
		background-color: #000;
		background-size: cover;
		/*background-size: 100%;*/
		background-position: center;
	}
	.bg2 {
		background-image: url(../assets/B6U6JRIQ6B090008.jpg);
		background-repeat: no-repeat;
		background-color: #263798;
		background-size: cover;
		background-position: center;
	}
	.bg3 {
		background-image: url(../assets/B1CF84QG6B090008.jpg);
		background-repeat: no-repeat;
		background-color: #263798;
		background-size: cover;
		background-position: center;
	}
</style>